<template>
 <div class="layout-container">
    <app-header></app-header>
    <app-nav-bar></app-nav-bar>
    <app-main></app-main>
 </div>
</template>

<script>
import AppHeader from "./AppHeader"
import AppNavBar from "./AppNavBar"
import AppMain from "./AppMain"
export default {
 name : "", 
 data(){
  return {

  }
 },
 components : {
    AppHeader,
    AppNavBar,
    AppMain
 },
}
</script>


<style scoped>
.header{

    height: 50px;
    line-height:50px;
    background-color:  #2d3a4b;
    padding:0 40px;
}
.navbar{
    width:230px;
    background-color: #545c64;
    position : absolute;
    left :0;
    top : 50px;
    bottom :0;
    overflow-y: auto;
}
.main{
    background-color: #fff;
    position : absolute;
    left : 230px;
    top:50px;
    bottom :0;
    right :0;
    overflow-y: auto;
    padding:10px;
}
</style>